<template>
    <div class="article-home">
        <!-- 顶部轮播图区域 -->
        <div class="carousel-container">
            <el-carousel :interval="3000" arrow="always" class="carousel">
                <el-carousel-item v-for="item in imgList" :key="item.src">
                    <div class="carousel-item">
                        <img :src="item.src" class="carousel-img" />
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div class="search-bar">
                <el-input
                    v-model="searchQueryName"
                    placeholder="请输入搜索内容"
                    prefix-icon="el-icon-search"
                    clearable
                    @keyup.enter="handleSearch"
                    class="search-input"
                ></el-input>
                <el-button type="primary" @click="handleSearch" class="search-button">搜索</el-button>
            </div>
        </div>

        <!-- 商品卡片区域 -->
        <div class="cards-container">
            <el-card
                v-for="product in products"
                :key="product.id"
                class="product-card"
                @click="navigateToProductDetail(product.id)"
            >
                <div class="card-content">
<!--                    <img :src="product.product_img" alt="商品图片" class="product-image" />-->
                    <el-image :src="baseUrl+product.productImg" alt="User Avatar" class="product-image"></el-image>
                    <div class="text item">
                        {{ product.productName}}
                    </div>
                    <div class="clearfix">
                        <span>{{ product.description }}</span>
                    </div>
                </div>
                <div class="price">
                    ￥ {{ product.price }}
                </div>
            </el-card>
        </div>

        <!-- 按钮点击加载更多 -->
        <div style="text-align: center;">
            <el-button
                style="margin-top: 10px; margin-left: 8px;"
                type="primary"
                round
                plain
                @click="loadMoreProducts"
            >
                <el-icon><Plus /></el-icon>点击加载更多
            </el-button>
        </div>
    </div>
</template>





<script setup>
import {onMounted, ref} from 'vue';
import { ElCarousel, ElCarouselItem, ElCard, ElButton, ElInput, ElIcon, ElMessage } from 'element-plus';
import router from "@/router";
import axios from "axios";

const baseUrl = getBaseUrl();
// 定义轮播图图片
const imgList = ref([
    { src: '/image/login/lun5.png' },
    { src: '/image/login/lun6.png' }
]);

// 示例商品数据
const products = ref([
    // {
    //     id: 1,
    //     shopId:'101',
    //     productName: '葡萄',
    //     description: '选用优质“阳光玫瑰”葡萄，颗粒饱满，色泽鲜艳',
    //     price: '10',
    //     stock:'101',
    //     product_img: '/image/login/product/putao.png',
    // },
    // {
    //     id: 2,
    //     shopId:'102',
    //     productName: '猪肉',
    //     description: '精选猪肉。',
    //     price: '50',
    //     stock:'102',
    //     product_img: '/image/login/product/pig.png',
    // },
    // {
    //     id: 3,
    //     shop_id:'103',
    //     productName: '青菜',
    //     description: '青菜，绿色健康，营养丰富，适合做菜。',
    //     price: '30',
    //     stock:'103',
    //     product_img: '/image/login/product/qc.png',
    // },
    // {
    //     id: 4,
    //     shopId:'104',
    //     productName: '虾',
    //     description: '虾，鲜嫩滑滑，营养丰富，适合做菜。',
    //     price: '40',
    //     stock:'104',
    //     product_img: '/image/login/product/xia.png',
    // },
    // {
    //     id: 5,
    //     shopId:'105',
    //     productName: '鱼',
    //     description: '鱼，鲜嫩滑滑，营养丰富，适合做菜。',
    //     price: '50',
    //     stock:'105',
    //     product_img: '/image/login/product/fish.png',
    // },
    // {
    //     id: 6,
    //     shopId:'106',
    //     productName: '西红柿',
    //     description: '西红柿，新鲜，营养丰富，适合做菜。',
    //     price: '20',
    //     stock:'106',
    //     product_img: '/image/login/product/tomato.png',
    // }
    // 其他商品数据...
]);

// 加载商品数据
const loadProducts = () => {
    axios.get(BASE_URL+'/v1/product/selectProductList')
        .then((response)=>{
            if(response.data.code === 2000){
                products.value = response.data.data;
            }else{
                ElMessage.error(response.data.msg);
            }
        })
}
onMounted(()=>{
  loadProducts();
})
// 导航到商品详情页
const navigateToProductDetail = (id) => {
    router.push("/product?id="+id);
};

// 搜索查询框内容
const searchQueryName = ref('');
// 处理搜索
const handleSearch = () => {
    if (searchQueryName.value.trim() === '') {
        ElMessage.warning('请输入搜索内容');
        return;
    }
    let data = searchQueryName.value;
    console.log("内容：",data);
    axios.get(BASE_URL+'/v1/product/selectProductList?productName='+data)
        .then((response)=>{
            if(response.data.code === 2000){
                products.value = response.data.data;
            }else{
                ElMessage.error(response.data.msg);
            }
        })
};

// 加载更多商品
const loadMoreProducts = () => {
    // 这里可以调用 API 加载更多商品数据
    ElMessage.success('加载更多商品');
};

// 导航到商铺页面
const navigateToShopPage = () => {
    router.push("/shops");
};
</script>


<style scoped>
.article-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.shop-button-container {
    position: absolute;
    top: 20px;
    right: 20px;
}

.shop-button {
    background-color: #409eff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.shop-button:hover {
    background-color: #66b1ff;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-item {
    position: relative;
    width: 100%;
    height: 400px;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-bar {
    width: 80%;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.search-input {
    width: 100%;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
}

.search-button {
    margin-left: 10px;
    background-color: green;
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: rgba(0, 123, 255, 1);
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}

.product-card {
    border-radius: 16px;
    overflow: hidden;
    width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.product-card:hover {
    transform: scale(1.05);
}

.card-content {
    padding: 16px;
}

.product-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.text.item {
    margin-top: 16px;
    font-size: 15px;
    color: #333333;
    font-weight: bold;
}

.price {
    margin-top: 8px;
    font-size: 14px;
    color: #ff5722;
}

.clearfix {
    padding: 8px 16px;
    border-top: 1px solid #ddd;
    text-align: left;
    font-size: 11px;
    color: #777777;
}
</style>

